<template>
	<view :class="['page', { iphoneX: isIphoneX }]">
		<template v-if="token && isLogin">
			<!-- 设备出厂设置 -->
			<template v-if="type == 'entry'">
				<view class="body">
					<view class="form-wrap">
						<view class="form-item">
							<view class="label">设备类型</view>
							<view class="form-picker" @click="showPopup('show', 'isChangeType')">
								<view class="picker">
									<view :class="['select-data', { 'input-placeholder': !devType.select }]">
										{{ devType.select || '选择设备类型' }}
									</view>
									<view class="icon">
										<view class="iconfont f-s26">&#xe653;</view>
									</view>
								</view>
							</view>
						</view>
						<view class="form-item">
							<view class="label">设备名称</view>
							<view class="form-input">
								<view class="content"><input type="text" class="inp" v-model="entryParams.devName"
										placeholder="输入设备名称" @focus="clearDevName" /></view>
							</view>
						</view>
						<view class="form-item">
							<view class="label">设备型号</view>
							<view class="form-input" @click="showDevNumber">
								<view class="content"><input type="text" class="inp" v-model="entryParams.devNum"
										placeholder="输入设备型号" disabled="" /></view>
							</view>
						</view>

						<view v-if="entryParams.devType != 7 && entryParams.devType != ''" class="form-item">
							<view class="label">设备编码</view>
							<view class="form-input">
								<view class="content"><input type="text" class="inp" v-model="entryParams.devCode"
										placeholder="仅物联网设备需要输入" /></view>
							</view>
						</view>

						<view class="form-item">
							<view class="label">生产日期</view>
							<picker class="form-picker" mode="date" @change="changeDate($event, 'entry')">
								<view class="picker">
									<view :class="['select-data', { 'input-placeholder': !entryParams.devDate }]">
										{{ entryParams.devDate || '生产日期' }}
									</view>
									<view class="icon">
										<view class="iconfont f-s26">&#xe653;</view>
									</view>
								</view>
							</picker>
						</view>
						<view class="form-item">
							<view class="label">质量检验</view>
							<view class="form-input">
								<view class="content"><input type="text" class="inp" v-model="entryParams.devQuality"
										placeholder="质量检验" disabled /></view>
							</view>
						</view>
						<view class="form-item">
							<view class="label">检验人员</view>
							<view class="form-input">
								<view class="content"><input type="text" class="inp" v-model="entryParams.devCheckUser"
										placeholder="检验人员" /></view>
							</view>
						</view>
						<view class="form-item">
							<view class="label">生产厂家</view>
							<picker class="form-picker" mode="selector" value="0" :range="company"
								@change="changeCompany">
								<view class="picker">
									<view :class="['select-data', { 'input-placeholder': !entryParams.devCompany }]">
										{{ entryParams.devCompany || '选择生产厂家' }}
									</view>
									<view class="icon">
										<view class="iconfont f-s26">&#xe653;</view>
									</view>
								</view>
							</picker>
						</view>
					</view>

					<view class="upload-pic-wrap">
						<template>
							<view class="form-upload-pic">
								<template>
									<view class="img-item" v-for="(item, index) in entryParams.pic" :key="index">
										<image src="@/static/images/filter_bg.png" mode="widthFix">
											<!-- 占位 -->
										</image>
										<view class="img-wrap" @click="previewPic(index, 1)">
											<image class="img" :src="item" mode="widthFix"></image>
										</view>
										<view class="del-icon" @click="delPic(index, 1)">
											<view class="iconfont">&#xe65c;</view>
										</view>
									</view>
								</template>
								<view v-if="entryParams.pic.length < 5" class="img-item add-btn"
									@click="uploadImage(1)">
									<image src="@/static/images/upload_pic.png" mode="widthFix"></image>
								</view>
							</view>
							<view class="upload-pic-tips">设备出厂图片(最多5张)</view>
						</template>
					</view>
				</view>
				<view class="footer">
					<view class="fix-wrap bottom">
						<view class="submit-btn" @click="submitDevInfo">提交出厂信息</view>
					</view>
				</view>
			</template>

			<!-- 设备安装 -->
			<template v-if="type == 'install'">
				<view class="body">
					<!-- :show-location="true" -->
					<view class="map-area"><map id="map" ref="map" :markers="markers" style="width: 100%;"></map></view>
					<view class="mod-grid">
						<view class="hd">设备信息</view>
						<view class="hd"></view>
						<view class="con">
							<view class="detail-wrap">
								<view class="detail-item">
									<view class="label">设备名称</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.name }}</view>
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">设备型号</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.model_number }}</view>
										</view>
									</view>
								</view>
								<view class="detail-item" v-if="detail.type != 7">
									<view class="label">设备编码</view>
									<view class="detail-input">
										<view class="content"><input v-model="detail.dev_number" class="val split" />
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">安装区域</view>

									<!-- #ifdef APP-PLUS -->
									<!-- <view class="detail-input" @click="changeArea">
										<view class="content">
											<view :class="['val', 'split', 'select-data', { 'input-placeholder': !installParams.area }]">
												{{ installParams.area || '安装区域' }}
											</view>
										</view>
										<view class="icon"><view class="iconfont f-s26">&#xe653;</view></view>
									</view> -->

									<picker class="detail-picker" mode="multiSelector" @change="selectCity"
										@columnchange="changeCity" :range="select_city.cityNames"
										:value="select_city.selected">
										<view class="picker">
											<view
												:class="['select-data', { 'input-placeholder': !installParams.area }]">
												{{ installParams.area || '安装区域' }}
											</view>
											<view class="icon">
												<view class="iconfont f-s26">&#xe653;</view>
											</view>
										</view>
									</picker>
									<!-- #endif -->

									<!-- #ifndef APP-PLUS -->
									<picker class="detail-picker" mode="region" @change="changeArea">
										<view class="picker">
											<view
												:class="['select-data', { 'input-placeholder': !installParams.area }]">
												{{ installParams.area || '安装区域' }}
											</view>
											<view class="icon">
												<view class="iconfont f-s26">&#xe653;</view>
											</view>
										</view>
									</picker>
									<!-- #endif -->
								</view>
								<view class="detail-item">
									<view class="label">详细地址</view>
									<view class="detail-input" @click="changeAddress">
										<view class="content">
											<view
												:class="['val split-line', { 'input-placeholder': !installParams.address }]">
												{{ installParams.address || '安装详细地址' }}
											</view>
										</view>
										<view class="icon">
											<view class="iconfont f-s40 f-blue">&#xe619;</view>
										</view>
									</view>
								</view>
								<!-- <view class="detail-item">
									<view class="label">地址坐标</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{installParams.lat}} {{installParams.lng}}</view>
										</view>
									</view>
								</view> -->
							</view>
						</view>
					</view>

					<view class="mod-grid">
						<view class="hd">其他信息</view>
						<view class="con">
							<view class="form-wrap">
								<view class="form-item">
									<view class="label">业主名称</view>
									<view class="form-input">
										<view class="content">
											<input type="text" class="inp" confirm-type="done" v-model="installParams.customer" placeholder="输入业主名称" @focus="showCacheCustomer('hide')" />
											<view v-if="cacheCustomer.length > 0" class="link" @click="showCacheCustomer('show')">历史记录</view>
										</view>
										<view class="cache-list" v-if="isShowCacheCustomer">
											<view class="item" v-for="(item, index) in cacheCustomer" :key="index"
												@click="selectCacheCustomer(item)">{{ item }}</view>
										</view>
									</view>
								</view>
								<view class="form-item">
									<view class="label">售后联系</view>
									<view class="form-input">
										<view class="content"><input type="text" class="inp"
												v-model="installParams.worker" placeholder="售后联系人" /></view>
									</view>
								</view>
								<view class="form-item">
									<view class="label">联系电话</view>
									<view class="form-input">
										<view class="content"><input type="text" class="inp"
												v-model="installParams.phone" placeholder="售后联系电话" /></view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="mod-grid">
						<view class="hd">上传实景图片</view>
						<view class="form-wrap upload-pic-wrap">
							<template>
								<view class="form-upload-pic">
									<template>
										<!-- 1.已上传  2.准备上传 -->
										<!-- 准备上传图片 -->
										<view class="img-item" v-for="(item, index) in installParams.pic" :key="index">
											<image src="@/static/images/filter_bg.png" mode="widthFix">
												<!-- 占位 -->
											</image>
											<view class="img-wrap" @click="previewPic(index, 2)">
												<image class="img" :src="item.url" mode="widthFix"></image>
											</view>
											<view class="del-icon" @click="delPic(index, 2)">
												<view class="iconfont">&#xe65c;</view>
											</view>
										</view>
									</template>
									<view v-if="installParams.pic.length < 5" class="img-item add-btn"
										@click="uploadImage(2)">
										<image src="@/static/images/upload_pic.png" mode="widthFix"></image>
									</view>
								</view>
								<view class="upload-pic-tips">设备安装实景图片(最多5张)</view>
							</template>
						</view>
					</view>
				</view>
				<view class="footer">
					<view class="fix-wrap bottom">
						<view class="submit-btn" @click="submitInstall">提交安装信息</view>
					</view>
				</view>
			</template>

			<!-- 设备详情 -->
			<template v-if="type == 'detail'">
				<template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template>
				<template v-else>
					<view class="body" style="display: flex;flex-direction: column;">
						<view class="map-area">
							<map id="map" scale="10" :latitude="detail.gcj02_lat" :longitude="detail.gcj02_lng"
								ref="map" :show-location="true" :markers="markers"
								style="width: 100%;max-height: 100%;"></map>
						</view>
						<view class="mod-grid">
							<view class="hd">设备信息</view>
							<view class="con">
								<view class="detail-wrap">
									<view class="detail-item">
										<view class="label">设备名称</view>
										<view class="detail-input">
											<view class="content">
												<view class="val split">{{ detail.name || '-' }}</view>
											</view>
										</view>
									</view>
									<!-- <view class="detail-item">
										<view class="label">设备类型</view>
										<view class="detail-input">
											<view class="content">
												<view class="val split">{{detail.name||'-'}}</view>
											</view>
										</view>
									</view> -->
									<view class="detail-item">
										<view class="label">设备型号</view>
										<view class="detail-input">
											<view class="content">
												<view class="val split">{{ detail.model_number || '-' }}</view>
											</view>
										</view>
									</view>
									<view v-if="detail.dev_number" class="detail-item">
										<view class="label">设备编号</view>
										<view class="detail-input">
											<view class="content">
												<view class="val split">{{ detail.dev_number }}</view>
											</view>
										</view>
									</view>
									<view class="detail-item">
										<view class="label">质量检测</view>
										<view class="detail-input">
											<view class="content">
												<view class="val split">{{ detail.quality_testing || '-' }}</view>
											</view>
										</view>
									</view>
									<view class="detail-item">
										<view class="label">生产日期</view>
										<view class="detail-input">
											<view class="content">
												<view class="val split">{{ detail.production_date || '-' }}</view>
											</view>
										</view>
									</view>
									<view class="detail-item">
										<view class="label">生产厂家</view>
										<view class="detail-input">
											<view class="content">
												<view class="val split">{{ detail.manufacturers || '-' }}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="mod-grid">
							<view class="hd">其他信息</view>
							<view class="con">
								<view class="detail-wrap">
									<view class="detail-item" @click="openMap">
										<view class="label">安装地址</view>
										<view class="detail-input">
											<view class="content">
												<view class="val split-line">
													{{ detail.address || '--' }}
												</view>
												<view class="map-btn">
													<view class="icon">
														<image src="@/static/images/map_btn.png" mode="widthFix">
														</image>
													</view>
													<view class="text">去这里</view>
												</view>
											</view>
										</view>
									</view>
									<view class="detail-item">
										<view class="label">安装时间</view>
										<view class="detail-input">
											<view class="content">
												<view class="val split">{{ detail.addtime || '' }}</view>
											</view>
										</view>
									</view>
									<view class="detail-item">
										<view class="label">安装人员</view>
										<view class="detail-input">
											<view class="content">
												<view class="val split">{{ detail.realname || '' }}</view>
											</view>
										</view>
									</view>
									<view class="detail-item" @click="tellphone">
										<view class="label">报修电话</view>
										<view class="detail-input">
											<view class="content">
												<template v-if="detail.upkeep_phone && detail.upkeep_name">
													<view class="val split">
														{{ detail.upkeep_phone || '' }}({{ detail.upkeep_name || '' }})
													</view>
													<view class="icon">
														<image src="@/static/images/tell.png" mode="widthFix"></image>
													</view>
												</template>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="mod-grid">
							<view class="hd">设备实景图片</view>
							<view class="con">
								<view class="img-wrap" v-for="(item, index) in files" :key="index"
									@click="previewImage(index)">
									<image :src="item + '&type=1'" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="footer">
						<view class="fix-wrap bottom">
							<view class="btn-wrap">
								<navigator :url="
										'/package_common/apply/apply?type=1&dev_type=' +
											detail.type +
											'&number=' +
											detail.number +
											'&dev_name=' +
											detail.name +
											'&dev_num=' +
											detail.model_number +
											'&address=' +
											detail.address
									" hover-class="none" class="btn">
									上报故障
								</navigator>
								<navigator :url="'/package_common/dev_mend/dev_mend?type=1&number=' + detail.number"
									hover-class="none" class="btn">故障记录</navigator>
								<navigator :url="
										'/package_common/apply/apply?type=2&dev_type=' +
											detail.type +
											'&number=' +
											detail.number +
											'&dev_name=' +
											detail.name +
											'&dev_num=' +
											detail.dev_number +
											'&address=' +
											detail.address +
											'&owner=' +
											detail.owner
									" hover-class="none" class="btn">
									售后维修
								</navigator>
								<navigator :url="'/package_common/dev_mend/dev_mend?type=2&number=' + detail.number"
									hover-class="none" class="btn">维修记录</navigator>
							</view>
						</view>
					</view>
				</template>
			</template>

			<!-- 旧设备无详情 -->
			<template v-if="type == '404'">
				<empty msg="设备暂无详情信息"></empty>
			</template>
		</template>

		<!-- 弹窗 -->
		<view v-if="popupFlag.isFullPage" class="full-fix-page">
			<!-- 填写设备型号 -->
			<view v-if="popupFlag.isDevNumber" class="popup-wrap a-fadein">
				<view class="popup-type-model ">
					<view class="popup-body devnumber-area">
						<view class="close-btn iconfont" @click="showPopup('hide')">&#xe65b;</view>
						<view class="title">设备型号</view>
						<view class="devnumber-inp-bar"><input type="text" v-model="devNumber.select"
								placeholder="输入设备型号" @focus="clearDevNumber" /></view>
						<picker mode="selector" :range="devNumber.data" range-key="name" @change="changeDevNumber">
							<view class="select-btn">已有型号中选择</view>
						</picker>
						<view class="confirm-btn" @click="confirmDevNumber">确定</view>
					</view>
				</view>
			</view>

			<!-- 设备类型切换 -->
			<view v-if="popupFlag.isChangeType" class="picker-bottom-wrap">
				<view class="hd">
					<view class="cancle" @click="showPopup('hide')">取消</view>
					<view class="confirm" @click="comfirmType">确定</view>
				</view>
				<picker-view indicator-class="indicatorClass" class="picker-view-wrap row-2" :value="changeType"
					@change="changeDevType">
					<picker-view-column class="item-column">
						<view class="item" v-for="(item, index) in devType.data" :key="index">{{ item.name }}</view>
					</picker-view-column>
					<picker-view-column class="item-column">
						<view class="item" v-for="(item, index) in devType.sub" :key="index">{{ item.name }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue';
	import empty from '@/components/empty.vue';
	import {
		uploadImage,
		previewImage,
		encodeToString,
		checkPhone
	} from '@/common/util.js';
	import {
		map_key,
		gaode_key
	} from '@/config.js';
	import QQMapWX from '@/common/map/qqmap-wx-jssdk.min.js';
	import permision from '@/common/permission.js';
	export default {
		name: 'name',
		data() {
			return {
				type: '',
				devState: '',
				isIphoneX: getApp().globalData.isIphoneX,
				loginStateUpdate: false,
				token: uni.getStorageSync('token'),
				appid: getApp().globalData.appid,
				isLogin: false,
				isStop: true,
				popupFlag: {
					isFullPage: false,
					isDevNumber: false,
					isChangeType: false
				},
				entryParams: {
					devName: '',
					devType: '',
					devNum: '',
					devCode: '',
					devDate: '',
					devQuality: '合格',
					devCheckUser: '' || uni.getStorageSync('userInfo').realname,
					devCompany: '广州瑞丰智能科技有限公司',
					typeid: '',
					pic: []
				},
				installParams: {
					devName: '',
					devNum: '',
					area: '',
					devType: '',
					p_province_id: '',
					p_city_id: '',
					altitude: '',
					area_id: '',
					address: '',
					lat: '',
					lng: '',
					worker: '' || '李士军',
					phone: '' || '13609066066',
					customer: '',
					uploadPic: [],
					pic: []
				},
				isShowCacheCustomer: false,
				cacheCustomer: uni.getStorageSync('customers'),
				devType: {
					select: '',
					data: [],
					sub: []
				},
				changeType: [0, 0],
				company: ['广州瑞丰生物科技有限公司', '广州瑞丰智能科技有限公司'],
				date: '',
				markers: [],
				devNumber: {
					select: '',
					data: []
				},
				userInfo: uni.getStorageSync('userInfo'),
				number: '',
				detail: {},
				files: [],
				pageCode: Date.parse(new Date()),
				loadingState: {
					default: true
				},
				image_path: getApp().globalData.image_path,
				addressDetail: '',
				isScan: false,
				//选择区域
				select_city: {
					//二维数组 [[],[],[]]
					cities: [],
					cityNames: [],
					selected: [0, 0, 0]
				}
			};
		},
		async onLoad(params) {
			console.log('params', params);
			if (params.q) {
				this.number = encodeToString(params.q)
					.split('?')[1]
					.split('=')[1]; // 微信扫码进入
			} else {
				this.number = params.number; // 小程序扫码/页面进入
				this.isScan = params.isScan || false;
			}

			if (this.token) {
				this.isLogin = await this.$loginState('check');
				if (this.isLogin) {
					this.devState = await this.checkDevState(); // 检测设备状态
					console.log(this.devState, 123)
					if (this.devState == 1002) {
						this.type = 'entry';

						// 存在缓存，获取缓存值
						if (uni.getStorageSync('entryParams')) {
							this.entryParams.devName = uni.getStorageSync('entryParams').devName;
							this.devType.select = uni.getStorageSync('entryParams').devType;
							this.entryParams.devNum = uni.getStorageSync('entryParams').devNum;
							this.entryParams.devCode = uni.getStorageSync('entryParams').devCode;
							this.entryParams.devDate = uni.getStorageSync('entryParams').devDate;
							this.entryParams.devQuality = uni.getStorageSync('entryParams').quality_testing;
							this.entryParams.devCheckUser = uni.getStorageSync('entryParams').devCheckUser;
							this.entryParams.devCompany = uni.getStorageSync('entryParams').devCompany;
							this.entryParams.typeid = uni.getStorageSync('entryParams').typeId;
							this.entryParams.devType = uni.getStorageSync('entryParams').type;
						}

						this.devType.data = await this.getDeviceType();
						if (this.devType.data[0].child.length > 0) {
							this.devType.sub = this.devType.data[0].child;
						}
						this.getDevNumber();
						uni.setNavigationBarTitle({
							title: '设备出厂设置'
						});
					} else if (this.devState == 1000) {
						this.type = 'install';
						// this.getLocation();
						// this.checkLocationPermission();
						await this.getCities();
						await this.getDevInfo();
						uni.setNavigationBarTitle({
							title: '设备安装'
						});
					} else if (this.devState == 1001) {
						this.type = 'detail';
						this.getDevInfo();
						uni.setNavigationBarTitle({
							title: '设备详情'
						});
					} else {
						this.type = '404';
						uni.setNavigationBarTitle({
							title: '设备详情'
						});
					}
				} else {
					this.isLogin = await this.$loginState('reset');
				}
			}
		},
		async onShow() {
			if (this.loginStateUpdate) {
				this.token = uni.getStorageSync('token');
				this.userInfo = uni.getStorageSync('userInfo');
				this.isLogin = true;
				this.loginStateUpdate = false;

				this.devState = await this.checkDevState(); // 检测设备状态
				if (this.devState == 1002) {
					this.type = 'entry';

					this.devType.data = await this.getDeviceType();
					if (this.devType.data[0].child.length > 0) {
						this.devType.sub = this.devType.data[0].child;
					}
					this.getDevNumber();
					uni.setNavigationBarTitle({
						title: '设备出厂设置'
					});
				} else if (this.devState == 1000) {
					this.type = 'install';
					// this.checkLocationPermission();
					// #ifdef APP-PLUS
					// #endif
					this.getCities();
					this.getDevInfo();
					uni.setNavigationBarTitle({
						title: '设备安装'
					});
				} else if (this.devState == 1001) {
					this.type = 'detail';
					this.getDevInfo();
					uni.setNavigationBarTitle({
						title: '设备详情'
					});
				} else {
					this.type = '404';
					uni.setNavigationBarTitle({
						title: '设备详情'
					});
				}
			}

			if (!this.token && !this.isLogin) {
				this.isLogin = await this.$loginState('reset');
			}
		},
		// onReady() {
		// 	// #ifdef APP-PLUS
		// 	setTimeout(() => {
		// 		console.log('onReady select_city default-hide');
		// 		uni.getSubNVueById('select_city').hide();
		// 	}, 300);
		// 	// #endif
		// },
		// onUnload() {
		// 	// #ifdef APP-PLUS
		// 	console.log('取消事件监听');
		// 	uni.getSubNVueById('select_city').hide();
		// 	uni.off();
		// 	// #endif
		// },
		//点击返回键  解决APP扫一扫进入 不能返回问题
		onBackPress() {
			// #ifdef APP-PLUS
			if ((this.devState == 1002 && this.type == 'entry') || this.isScan) {
				console.log('返回index');
				uni.switchTab({
					url: '/pages/index/index',
					success() {
						console.log('扫一扫后退回首页');
					},
					fail(err) {
						console.log('err', err);
					}
				});
				//true表示自行处理返回逻辑  false默认
				return true;
			}
			return false;
			// #endif
		},

		methods: {
			// 检测设置状态  1002 未出厂  1000 已出厂 未安装  1001 已安装
			checkDevState: async function() {
				let type = '';
				let res = await this.$api.tool_api.checkDevState({
					devnumber: this.number == 'null' ? '' : this.number,
					appid: this.appid,
					token: this.token
				});
				if (res.data.ret == 1004) {} else {
					return res.data.ret;
				}
			},

			// 出厂设置 - 获取全部设备类型
			// 获取设备类型
			getDeviceType: async function() {
				let res = await this.$api.tool_api.getDevTypeCount({
					appid: this.appid,
					token: this.token,
					user_id: this.userInfo.uid
				});
				if (res.data.ret == 1000) {
					return res.data.data;
				}
			},

			// 切换设备类型
			// 初始化
			DevTypeInit: function() {
				// this.devType.sub=
			},

			changeDevType: function(e) {
				this.changeType = e.detail.value;
				// console.log(this.changeType,e.detail.value)
				if (this.devType.data[this.changeType[0]].child.length > 0) {
					this.devType.sub = this.devType.data[this.changeType[0]].child;
				} else {
					this.devType.sub = [];
				}
			},

			// 确定设备类型
			comfirmType: function() {
				if (this.devType.sub.length > 0) {
					this.devType.select = this.devType.data[this.changeType[0]].name + '>' + this.devType.sub[this
						.changeType[1]].name;
					this.entryParams.devName = this.devType.sub[this.changeType[1]].name;
					this.entryParams.devType = this.devType.sub[this.changeType[1]].number;
					this.entryParams.typeid = this.devType.sub[this.changeType[1]].id;
				} else {
					this.devType.select = this.devType.data[this.changeType[0]].name;
					this.entryParams.devName = this.devType.data[this.changeType[0]].name;
					this.entryParams.devType = this.devType.data[this.changeType[0]].number;
					this.entryParams.typeid = this.devType.data[this.changeType[0]].id;
				}
				this.showPopup('hide');
			},

			// 出厂设置 - 获取全部设备型号
			getDevNumber: async function() {
				let res = await this.$api.tool_api.getDevNumber({
					appid: this.appid,
					token: this.token
				});
				if (res.data.ret == 1000) {
					this.devNumber.data = res.data.data;
				}
			},

			clearDevName: function() {
				this.entryParams.devName = '';
			},

			showDevNumber: function() {
				this.showPopup('show', 'isDevNumber');
				this.devNumber.select = this.entryParams.devNum;
			},

			// 出厂设置 - 选择设备型号
			changeDevNumber: function(e) {
				let index = e.detail.value;
				this.devNumber.select = this.devNumber.data[index].name;
				this.entryParams.devNum = this.devNumber.select;
				this.showPopup('hide');
			},

			// 确定设备型号
			confirmDevNumber: function() {
				if (this.devNumber.select == '') {
					this.$showToast({
						icon: 'none',
						title: '请输入设备型号'
					});
				} else {
					this.entryParams.devNum = this.devNumber.select;
					this.showPopup('hide');
				}
			},

			clearDevNumber: function() {
				this.devNumber.select = '';
			},

			// 出厂设置 - 选择生产厂家
			changeCompany: function(e) {
				let index = e.detail.value;
				this.entryParams.devCompany = this.company[index];
			},

			// 选择日期
			changeDate: function(e, type) {
				if (type == 'entry') {
					this.entryParams.devDate = e.detail.value;
				} else {
					this.installParams.date = e.detail.value;
				}
			},

			// 出厂设置 - 提交信息
			submitDevInfo: function() {
				let _this = this;
				if (this.entryParams.devType == '') {
					this.$showToast({
						icon: 'none',
						title: '请选择设备类型'
					});
				} else if (this.entryParams.devName == '') {
					this.$showToast({
						icon: 'none',
						title: '请输入设备名称'
					});
				} else if (this.entryParams.devNum == '') {
					this.$showToast({
						icon: 'none',
						title: '请选择设备型号'
					});
				} else if (this.entryParams.devCode == '' && this.entryParams.devType != 7) {
					this.$showToast({
						icon: 'none',
						title: '请输入设备编号'
					});
				} else if (this.entryParams.devDate == '') {
					this.$showToast({
						icon: 'none',
						title: '请选择设备生成日期'
					});
				} else if (this.entryParams.devCheckUser == '') {
					this.$showToast({
						icon: 'none',
						title: '请输入检验人员'
					});
				} else if (this.entryParams.devCompany == '') {
					this.$showToast({
						icon: 'none',
						title: '请选择生产厂家'
					});
				} else if (this.entryParams.pic.length == 0) {
					this.$showToast({
						icon: 'none',
						title: '请上传设备图片'
					});
				} else {
					let token = uni.getStorageSync('token');
					if (token) {
						uni.showModal({
							content: '设备出厂信息录入完成，确认出厂吗？',
							confirmText: '确认',
							cancelText: '取消',
							async success(res) {
								if (res.confirm) {
									if (_this.isStop) {
										_this.isStop = false;
										_this.uploadData(0, 1);
									}
								}
							}
						});
					} else {
						uni.showLoading({
							title: '登录超时...',
							mask: true,
							success() {
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/login/login?backType=prev',
										success() {
											uni.hideLoading();
										}
									});
									_this.isStop = true;
								}, 1000);
							}
						});
					}
				}
			},

			///////////////////安装设备///////////////////////////////

			// 安装设备 - 获取当前地址
			getLocation: function() {
				let _this = this;
				uni.getLocation({
					type: 'gcj02',
					async success(localRes) {
						// console.log(localRes);
						_this.reverseGeocoder(localRes);

						let mapContext = uni.createMapContext('map');
						mapContext.moveToLocation({
							latitude: parseFloat(localRes.latitude),
							longitude: parseFloat(localRes.longitude)
						});
						let marker = {
							id: 0,
							latitude: parseFloat(localRes.latitude),
							longitude: parseFloat(localRes.longitude),
							iconPath: '/static/images/local_icon.png',
							width: 30,
							height: 30
						};
						_this.markers = [marker];
					},
					fail(err) {
						console.log('err: ', err);
						if (err.errMsg == 'getLocation:fail auth deny') {
							uni.showModal({
								title: '温馨提示',
								content: '检测到您未开启位置信息权限,是否开启。',
								confirmText: '去设置',
								success(res) {
									if (res.confirm) {
										uni.openSetting();
									}
								}
							});
						} else {
							uni.showModal({
								title: '温馨提示',
								content: err.errMsg,
								success(res) {
									if (res.confirm) {
										// uni.openSetting();
									}
								}
							});
						}
					}
				});
			},

			//判断是否开启位置权限
			checkLocationPermission() {
				// #ifdef APP-PLUS
				uni.$on('updateArea', data => {
					console.log('on:area', data);
					this.installParams.area = data.area;
					this.installParams.area_id = data.code;
				});
				this.requestLocationPermission();
				// #endif

				// #ifndef APP-PLUS
				this.getLocation();
				// #endif
			},

			// 安装设备 - 选择地址
			changeAddress: async function() {
				// #ifndef APP-PLUS
				this.chooseLocation();
				// #endif

				// #ifdef APP-PLUS
				let _this = this;
				var result = await permision.requestAndroidPermission('android.permission.ACCESS_FINE_LOCATION');
				console.log("检测是否开启授权result=1开启", result);
				var strStatus;
				if (result == 1) {
					strStatus = '已获得授权';
					this.chooseLocation();
				} else {
					uni.showModal({
						title: '温馨提示',
						content: '检测到您未开启位置信息权限,是否开启。',
						confirmText: '去设置',
						success(res) {
							if (res.confirm) {
								permision.gotoAppPermissionSetting();
							}
						}
					});
				}
				// #endif
			},

			chooseLocation() {
				let _this = this;
				uni.chooseLocation({
					success(res) {
						console.log('选择地址 ', res);
						// parseFloat(114.264699)+","+parseFloat(23.753034)
						let mapContext = uni.createMapContext('map');
						mapContext.moveToLocation({
							latitude: parseFloat(res.latitude),
							longitude: parseFloat(res.longitude)
						});
						let marker = {
							id: 0,
							latitude: parseFloat(res.latitude),
							longitude: parseFloat(res.longitude),
							iconPath: '/static/images/local_icon.png',
							width: 30,
							height: 30
						};
						_this.markers = [marker];
						// _this.markers.push(marker);
						// _this.installParams.altitude = res.altitude;
						_this.installParams.address = `${res.address}${res.name}`;
						_this.installParams.lat = res.latitude;
						_this.installParams.lng = res.longitude;

						_this.reverseGeocoder({
							latitude: res.latitude,
							longitude: res.longitude
						}, 2);
					},
					fail(err) {
						console.log('err', err);
					}
				});
			},

			// 安装设备 - 选择区域
			changeArea: function(e) {
				// // #ifdef APP-PLUS
				// uni.$emit('resetting', { type: [] });
				// uni.getSubNVueById('select_city').show();
				// // #endif
				// #ifndef APP-PLUS
				this.installParams.area = e.detail.value[0] + ' ' + e.detail.value[1] + ' ' + e.detail.value[2];
				this.installParams.area_id = e.detail.code[2];
				// #endif
			},

			// 安装设备 - 业主单位获取焦点
			showCacheCustomer: function(type) {
				if (type == 'show') {
					if (this.cacheCustomer.length > 0) {
						this.isShowCacheCustomer = true;
					}
				} else {
					this.isShowCacheCustomer = false;
				}
			},

			// 安装设备 - 业主单位选择缓存选项
			selectCacheCustomer: function(name) {
				this.installParams.customer = name;
				this.isShowCacheCustomer = false;
			},

			// 安装设备 - 提交信息
			submitInstall: function() {
				let _this = this;
				if (this.detail.type != 7 && this.detail.dev_number == '') {
					this.$showToast({
						icon: 'none',
						title: '请输入设备编号'
					});
				} else if (this.installParams.address == '') {
					this.$showToast({
						icon: 'none',
						title: '请选择设备安装地址'
					});
				} else if (this.installParams.customer == '') {
					this.$showToast({
						icon: 'none',
						title: '请输入业主名称'
					});
				} else if (this.installParams.date == '') {
					this.$showToast({
						icon: 'none',
						title: '请选择安装日期'
					});
				} else if (this.installParams.worker == '') {
					this.$showToast({
						icon: 'none',
						title: '请输入售后联系人名称'
					});
				} else if (this.installParams.phone == '') {
					this.$showToast({
						icon: 'none',
						title: '请输入售后联系人电话'
					});
				} else if (!checkPhone(this.installParams.phone)) {
					this.$showToast({
						icon: 'none',
						title: '请输入正确的手机号码'
					});
				} else if (this.installParams.pic.length == 0) {
					this.$showToast({
						icon: 'none',
						title: '请上传设备图片'
					});
				} else {
					let token = uni.getStorageSync('userInfo');
					if (token) {
						uni.showModal({
							content: '设备安装信息录入完成，确定安装激活吗？',
							async success(res) {
								if (res.confirm) {
									if (_this.isStop) {
										let picList = _this.installParams.pic.filter(it => !it.isUpload);
										_this.isStop = false;
										console.log('设备安装图片', _this.installParams.pic, picList);
										_this.uploadData(0, 2, picList);
									}
								}
							}
						});
					} else {
						uni.showLoading({
							title: '登录超时...',
							mask: true,
							success() {
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/login/login?backType=prev',
										success() {
											uni.hideLoading();
										}
									});
								}, 1000);
								_this.isStop = true;
							}
						});
					}
				}
			},

			// 上传数据
			uploadData: async function(index, type, picList) {
				// type 1 出厂  2 安装
				let end = '';
				let length = 0;
				let _this = this;

				if (type == 1) {
					length = this.entryParams.pic.length;
					if (index == length - 1) {
						end = 0;
					} else {
						end = -1;
					}
					let res = await this.$api.tool_api.deviceEntry({
						filePath: this.entryParams.pic[index],
						name: 'photo',
						formData: {
							number: _this.number,
							name: _this.entryParams.devName,
							type: _this.entryParams.devType,
							dev_number: _this.entryParams.devCode,
							model_number: _this.entryParams.devNum,
							quality_testing: _this.entryParams.devQuality,
							manufacturers: _this.entryParams.devCompany,
							inspector_uid: _this.userInfo.uid,
							inspector: _this.entryParams.devCheckUser,
							production_date: _this.entryParams.devDate,
							appid: _this.appid,
							token: _this.token,
							end: end,
							pageCode: this.pageCode,
							typeid: this.entryParams.typeid
						}
					});
					uni.showLoading({
						title: '出厂信息提交中...'
					});
					if (res.data) {
						res.data = JSON.parse(res.data); // uploadFile 返回data为string，转换成json

						if (res.data.ret == 1000) {
							if (index < length - 1) {
								setTimeout(() => {
									index++;
									_this.uploadData(index, 1);
								}, 1500);
							} else if (index == length - 1) {
								setTimeout(() => {
									uni.hideLoading();
									_this.isStop = true;
									uni.setStorage({
										key: 'entryParams',
										data: {
											devType: this.devType.select,
											devName: this.entryParams.devName,
											devNum: this.entryParams.devNum,
											devCode: this.entryParams.devCode,
											devDate: this.entryParams.devDate,
											quality_testing: this.entryParams.devQuality,
											devCheckUser: this.entryParams.devCheckUser,
											devCompany: this.entryParams.devCompany,
											typeId: this.entryParams.typeid,
											type: this.entryParams.devType
										}
									});
									uni.showModal({
										content: '设备出厂信息设置完成，是否现在安装',
										confirmText: '立即安装',
										cancelText: '暂不安装',
										success(m_res) {
											if (m_res.confirm) {
												uni.redirectTo({
													url: '/package_common/detail/detail?number=' +
														_this.number + '&isScan=' + _this
														.isScan
												});
											} else if (m_res.cancel) {
												uni.switchTab({
													url: '/pages/home/home'
												});
											}
										}
									});
								}, 1500);
							}
						}
					} else {
						uni.showToast({
							title: res.data.message,
							mask: true,
							success() {
								_this.isStop = true;
							}
						});
					}
				} else if (type == 2) {
					console.log(`设备安装图片${index}`, `dev_number`, this.number);
					length = picList.length; //this.installParams.pic.length;
					if (index == length - 1 || picList.length == 0) {
						end = 0;
					} else {
						end = -1;
					}
					let params = {
						filePath: picList[index]?.url,
						name: 'photo',
						formData: {
							device_number:this.detail.dev_number,
							dev_number: this.number,
							gcj02_lat: parseFloat(this.installParams.lat),
							gcj02_lng: parseFloat(this.installParams.lng),
							p_province_id: this.installParams.p_province_id,
							p_city_id: this.installParams.p_city_id,
							area_id: this.installParams.area_id,
							address: this.installParams.address,
							create_uid: this.userInfo.uid,
							pageCode: this.pageCode, //提交识别码,
							owner: this.installParams.customer,
							upkeep_name: this.installParams.worker,
							upkeep_phone: this.installParams.phone,
							end: end,
							appid: this.appid,
							token: this.token
						}
					}
					console.log('安装params', params);
					let res = await this.$api.tool_api.deviceInstall(params);
					console.log('安装res', res);

					uni.showLoading({
						title: '安装信息提交中...'
					});
					if (res.data) {
						if (picList.length) {
							res.data = JSON.parse(res.data); // uploadFile 返回data为string，转换成json
						}
						console.log(`上传图片下标index${index},图片数${length}`);
						if (res.data.ret == 1000) {
							if (index < length - 1) {
								setTimeout(() => {
									index++;
									_this.uploadData(index, 2, picList);
								}, 1500);
							} else {
								// if (index == length - 1)
								setTimeout(() => {
									_this.isStop = true;
									uni.hideLoading();
									let catchCustomer = uni.getStorageSync('customers') || [];
									if (catchCustomer.indexOf(this.installParams.customer) == -1) {
										if (catchCustomer.length == 5) {
											catchCustomer.splice(4, 1);
											catchCustomer.unshift(this.installParams.customer);
										} else {
											catchCustomer.unshift(this.installParams.customer);
										}
									}
									// let findIndex = catchCustomer.findIndex(it=>it==this.installParams.customer)

									uni.setStorage({
										key: 'customers',
										data: catchCustomer
									});
									this.$showToast({
										icon: 'success',
										title: '设备安装成功..'
									}).then(() => {
										uni.redirectTo({
											url: `/package_common/detail/detail?number=${this.number}&isScan=${this.isScan}`,
										});
									});
								}, 1500);
							}
						} else {
							_this.isStop = true;

							uni.hideLoading();
							uni.showToast({
								mask: true,
								icon: 'error',
								title: res.data.message || '提交失败',
								image: '../../static/images/error.png',
							});
						}
					} else {
						_this.isStop = true;

						uni.hideLoading();
						uni.showToast({
							mask: true,
							icon: 'error',
							title: res.data.message || '提交失败',
							image: '../../static/images/error.png',
						});
					}
				}
			},

			// 上传图片
			uploadImage: function(type) {
				// type 1 出厂 2 安装
				let _this = this;
				if (type == 1) {
					uploadImage({
						length: this.entryParams.pic.length,
						maxSize: 5,
						success(res) {
							_this.entryParams.pic = _this.entryParams.pic.concat(res);
						}
					});
				} else if (type == 2) {
					uploadImage({
						length: this.installParams.pic.length,
						maxSize: 5,
						success(res) {
							// _this.installParams.pic = _this.installParams.pic.concat({ isUpload: false, url: res[0] });
							res.forEach(it => {
								_this.installParams.pic.push({
									isUpload: false,
									url: it
								});
							});
						}
					});
				}
			},

			// 预览图片
			previewPic: function(index, type) {
				console.log('---------------------', type);
				// type 1 出厂图片  2 安装图片
				if (type == 1) {
					previewImage({
						data: this.entryParams.pic,
						index: index
					});
				} else if (type == 2) {
					// let isUpload = this.installParams.pic[index].isUpload;
					let data = [];
					this.installParams.pic.forEach(it => {
							data.push(it.url);
						}),
						previewImage({
							data: data,
							index: index
						});
				}
			},

			// 删除图片
			delPic: async function(index, type) {
				// type 1 出厂图片  2 安装图片
				if (type == 1) {
					this.entryParams.pic.splice(index, 1);
				} else if (type == 2) {
					console.log('线上：true,本地：false', this.installParams.pic[index].isUpload);
					uni.showLoading({
						title: '删除中...',
						mask: true
					});
					if (this.installParams.pic[index].isUpload) {
						let res = await this.$api.tool_api.delPic({
							appid: this.appid,
							token: this.token,
							file_path: this.installParams.pic[index].file_path,
							number: this.number
						});
						uni.hideLoading();
						console.log('删除图片', res);
						if (res.data.ret == 1000) {
							this.installParams.pic.splice(index, 1);
						} else {
							uni.showToast({
								icon: 'none',
								image: '../../static/images/error.png',
								title: res.data.message,
								mask: true,
								duration: 1000
							});
						}
					} else {
						uni.hideLoading();
						this.installParams.pic.splice(index, 1);
					}
				}
			},

			// 显示弹窗
			showPopup: function(t, n) {
				if (t == 'show') {
					this.popupFlag.isFullPage = true;
					this.popupFlag[n] = true;
				} else if (t == 'hide') {
					for (let i in this.popupFlag) {
						this.popupFlag[i] = false;
					}
				}
			},

			///////////////////设备详情///////////////////////////////

			// 获取设备详情
			getDevInfo: async function() {
				let res = await this.$api.tool_api.getDevInfo({
					number: this.number,
					appid: this.appid,
					token: this.token
				});
				if (res.data.ret == 1000) {
					this.loadingState.default = false;
					if (res.data.data.gcj02_lat && res.data.data.gcj02_lng) {
						let marker = {
							id: 0,
							latitude: parseFloat(res.data.data.gcj02_lat),
							longitude: parseFloat(res.data.data.gcj02_lng),
							iconPath: '/static/images/local_icon.png',
							width: 30,
							height: 30
						};
						this.markers.push(marker);
						let mapContext = uni.createMapContext('map');
						mapContext.moveToLocation({
							latitude: parseFloat(res.data.data.gcj02_lat),
							longitude: parseFloat(res.data.data.gcj02_lng)
						});

						let _this = this;

						// #ifndef APP-PLUS
						let qqmapsdk = new QQMapWX({
							key: map_key
						});
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.data.data.gcj02_lat,
								longitude: res.data.data.gcj02_lng
							},
							success(res) {
								console.log('地址', res);
								if (res.status === 0) {
									_this.addressDetail =
										`${res.result.address}(${res.result.formatted_addresses.recommend})`;
								}
							}
						});
						// #endif

						// #ifdef APP-PLUS
						// parseFloat(114.264699)+","+parseFloat(23.753034)//
						var gd_res = await _this.$api.tool_api.getCityInfo({
							key: gaode_key,
							location: parseFloat(res.data.data.gcj02_lng) + ',' + parseFloat(res.data.data
								.gcj02_lat)
						});
						console.log('app高德坐标解析gd_res.data.status=1成功', gd_res);
						if (gd_res.data.status == 1) {
							let {
								regeocode
							} = gd_res.data;
							_this.addressDetail = regeocode.formatted_address;
						}
						// #endif
						if (this.devState == 1000 || this.type == 'install') {
							this.reverseGeocoder({
								latitude: res.data.data.gcj02_lat,
								longitude: res.data.data.gcj02_lng
							});
						}
					} else {
						this.checkLocationPermission();
					}

					if (res.data.data.owner) {
						this.installParams.customer = res.data.data.owner;
					}

					res.data.data.filelist.forEach(item => {
						this.files.push(this.image_path + item.file_path);
						this.installParams.pic.push({
							isUpload: true,
							url: this.image_path + item.file_path,
							file_path: item.file_path
						});
					});
					this.detail = res.data.data;

					console.log('设备详情', this.detail);
				}
			},

			// 拨打电话
			tellphone: function() {
				if (!this.detail.upkeep_phone && !this.detail.upkeep_name) {
					return;
				}

				let _this = this;
				// #ifndef APP-PLUS
				this.call();
				// #endif

				// #ifdef APP-PLUS
				this.requestPhonePermission();
				// #endif
			},

			call() {
				uni.makePhoneCall({
					phoneNumber: this.detail.upkeep_phone,
					success(res) {
						console.log('拨打电话成功', res);
					},
					fail(err) {
						console.log('--', err);
					}
				});
			},

			// 打开地图
			openMap: function(e) {
				uni.openLocation({
					latitude: parseFloat(this.detail.gcj02_lat),
					longitude: parseFloat(this.detail.gcj02_lng),
					name: this.detail.owner,
					address: this.detail.address || this.addressDetail
				});
			},

			previewImage: function(index) {
				previewImage({
					data: this.files,
					index: index
				});
			},

			//检测APP  定位权限是否授权
			async requestLocationPermission() {
				let _this = this;
				var result = await permision.requestAndroidPermission('android.permission.ACCESS_FINE_LOCATION');
				console.log("检测是否定位授权result=1开启", result);
				var strStatus;
				if (result == 1) {
					strStatus = '已获得授权';
					this.getLocation();
				} else {
					setTimeout(() => {
						uni.showModal({
							title: '温馨提示',
							content: '检测到您未开启位置信息权限,将无法定位当前位置,是否开启。',
							confirmText: '去设置',
							success(res) {
								if (res.confirm) {
									permision.gotoAppPermissionSetting();
								}
							}
						});
					}, 1000);
				}
			},

			//检测APP  定位权限是否授权
			async requestPhonePermission() {
				let _this = this;
				var result = await permision.requestAndroidPermission('android.permission.CALL_PHONE');
				console.log(result);
				var strStatus;
				if (result == 1) {
					strStatus = '已获得授权';
					this.call();
				} else {
					uni.showModal({
						title: '温馨提示',
						content: '检测到您未开启拨打电话权限,是否开启。',
						confirmText: '去设置',
						success(res) {
							if (res.confirm) {
								permision.gotoAppPermissionSetting();
							}
						}
					});
				}
			},

			//经纬度解析
			async reverseGeocoder(localRes, t) {
				let _this = this;
				// #ifndef APP-PLUS
				let qqmapsdk = new QQMapWX({
					key: map_key
				});
				// 114.254898,23.727873,
				// 114.264699，23.753034
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: parseFloat(localRes.latitude),
						longitude: parseFloat(localRes.longitude)
					},
					success: function(res) {
						console.log('小程序坐标解析res', res);
						let {
							address_component: info
						} = res.result;
						if (t != 2) {
							//打开地图选择地址时用选择的地址
							_this.installParams.address = `${res.result.address}(${res.result.formatted_addresses.recommend})`
							_this.installParams.lat = res.result.location.lat;
							_this.installParams.lng = res.result.location.lng;
						}
						_this.installParams.area = res.result.address_component.province + ' ' + res.result.address_component.city + ' ' + res.result.address_component.district;
						_this.installParams.area_id = res.result.ad_info.adcode;
						// _this.installParams.altitude = res.result.location.altitude;
					}
				});
				// #endif

				// #ifdef APP-PLUS
				// parseFloat(114.264699)+","+parseFloat(23.753034)//
				var res = await _this.$api.tool_api.getCityInfo({
					key: gaode_key,
					location: parseFloat(localRes.longitude) + ',' + parseFloat(localRes.latitude)
				});
				console.log('app坐标解析res.data.status=1成功', res);
				if (res.data.status == 1) {
					let {
						regeocode
					} = res.data;
					_this.installParams.area = regeocode.addressComponent.province + ' ' + regeocode.addressComponent.city + ' ' + regeocode.addressComponent.district;
					_this.installParams.area_id = regeocode.addressComponent.adcode;
					if (t != 2) {
						_this.installParams.address = regeocode.formatted_address;
						_this.installParams.lat = regeocode.addressComponent.streetNumber.location.split(',')[1];
						_this.installParams.lng = regeocode.addressComponent.streetNumber.location.split(',')[0];
					}
				}
				// #endif
				// let area = this.installParams.area.split(' ');
				// let index1 = this.select_city.cityNames[0].indexOf(area[0]);
				// this.select_city.selected = [index1, 0, 0];
				// this.selectCity();
				// setTimeout(() => {
				// 	let index2 = this.select_city.cityNames[1].indexOf(area[1]);
				// 	let index3 = this.select_city.cityNames[2].indexOf(area[2]);
				// 	console.log('-------123123', this.select_city, this.installParams.area, index1, index2, index3);
				// 	this.select_city.selected = [index1, index2, index3];
				// 	// console.log('---', index1);
				// },1000); 
			},

			//app  选择安装区域
			//获取省市区数据
			async getCities() {
				let {
					cities,
					selected
				} = this.select_city;
				let prores;
				if (!this.select_city.cities[0]) {
					try {
						prores = await this.$api.tool_api.getCities({
							adcode: 'china',
							areaName: ''
						});
						this.select_city.cities[0] = prores.data.data.filter((item, index, self) => self.findIndex(x =>
							x.adcode === item.adcode) === index);
					} catch (e) {
						//TODO handle the exception
						console.log('proerr', e);
					}
				}
				try {
					let cres = await this.$api.tool_api.getCities({
						adcode: this.select_city.cities[0][selected[0]].adcode,
						areaName: 'province'
					});
					let dres = await this.$api.tool_api.getCities({
						adcode: cres.data.data[selected[1]].adcode,
						areaName: 'city'
					});

					// console.log('province: ', cres);
					this.select_city.cities = [this.select_city.cities[0], cres.data.data, dres.data.data];
					let [pNames, cNames, dNames] = this.select_city.cities;
					pNames = pNames ? pNames.map(it => it.name) : [];
					cNames = cNames ? cNames.map(it => it.name) : [];
					dNames = dNames ? dNames.map(it => it.name) : [];
					this.select_city.cityNames = [pNames, cNames, dNames];
					console.log("省市区数据", this.select_city);
				} catch (e) {
					//TODO handle the exception
					console.log('cderr', e);
				}
			},

			//选择区域  滑动
			changeCity(e) {
				if (e.detail.column != 2) {
					if (e.detail.column === 0) {
						this.select_city.selected = [e.detail.value, 0, 0];
					} else if (e.detail.column === 1) {
						this.select_city.selected = [this.select_city.selected[0], e.detail.value, 0];
					}
					this.getCities();
				} else {
					this.select_city.selected[e.detail.column] = e.detail.value;
				}
			},

			//选择确定安装区域
			selectCity() {
				let [p, c, d] = this.select_city.cities;
				let {
					selected
				} = this.select_city;
				let area, code;
				console.log(p?.length, c?.length, d?.length, d);
				if (d?.length) {
					area = `${p[selected[0]].name} ${c[selected[1]].name} ${d[selected[2]].name}`;
					code = d[selected[2]].adcode;
				} else {
					area = `${p[selected[0]].name} ${c[selected[1]].name}`;
					code = c[selected[1]].adcode;
				}
				console.log('选择安装区域', {
					area,
					code
				});
				this.installParams.area = area;
				this.installParams.area_id = code;
				// this.select_city.selected = [0,0,0];
				// this.selectCity();
			}
		},
		components: {
			loading,
			empty
		},
		computed: {},
		watch: {}
	};
</script>

<style lang="less">
	.map-area {
		height: 400rpx;
		margin-bottom: 20rpx;
		background: #ccc;

		#map {
			width: 100%;
			height: 100%;
			max-height: 100%;
		}

		map {
			height: 100%;
			max-height: 100%;
		}
	}

	.mod-grid {
		margin-bottom: 20rpx;

		.hd {
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			font-weight: bold;
			font-size: 30rpx;
		}
	}

	.map-btn {
		margin-right: 8rpx;
		flex-shrink: 0;

		.icon {
			width: 60rpx;
			height: 50rpx;
			line-height: 50rpx;
			margin: 0 auto;
		}

		.text {
			font-size: 28rpx;
			color: #0085ff;
		}
	}

	.btn-wrap {
		display: flex;

		.btn {
			flex-grow: 1;
			height: 60rpx;
			line-height: 60rpx;
			margin-top: 20rpx;
			border-right: 2rpx solid #eee;
			text-align: center;
			font-size: 30rpx;

			&:last-child {
				border-right: 0 none;
			}
		}
	}

	.img-wrap {}

	.form-wrap {
		margin-top: 20rpx;
	}

	.title {
		margin: 20rpx;
		font-size: 28rpx;
	}

	.submit-btn {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: #0085ff;
		color: #fff;
		font-size: 30rpx;
	}

	.form-upload-pic {
		margin: 20rpx 0 0 20rpx;
	}

	.upload-pic-tips {
		margin-bottom: 20rpx;
		padding-left: 20rpx;
		font-size: 24rpx;
		color: #999;
	}

	.upload-pic-wrap {
		padding-top: 10rpx;
		background: #fff;
		border-bottom: 2rpx solid #eee;
	}

	.devnumber-area {
		.close-btn {
			position: absolute;
			right: 0;
			top: 0;
			width: 80rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 46rpx;
		}

		.select-btn {
			text-align: right;
			font-size: 28rpx;
			color: #09f;
		}

		.confirm-btn {
			width: 98%;
			margin: 20rpx auto;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background: #09f;
			border-radius: 10rpx;
			color: #fff;
			font-size: 28rpx;
		}
	}

	.devnumber-inp-bar {
		padding: 20rpx 0;

		input {
			width: 90%;
			height: 70rpx;
			padding: 0 20rpx;
			margin: 0 auto;
			line-height: 70rpx;
			border: 2rpx solid #ddd;
			border-radius: 10rpx;
			font-size: 28rpx;
		}
	}
</style>